<template>
  <div class="page">
    <div class="banner">
      <img src="@/assets/banner2.png" alt="">

    </div>
    <div class="info_box">
      <h2 class="h2">专业客服在线一对一接待</h2>
      <div class="login">
        <div class="cell">
          <span class="name">称呼<i>*</i></span>
          <div class="input_box">
            <input type="text" class="a_input" v-model="addForm.name" />
          </div>
        </div>
        <div class="cell">
          <span class="name">电话<i>*</i></span>
          <div class="input_box">
            <input type="text" class="a_input" v-model="addForm.mobile" />
          </div>
        </div>
        <div class="cell">
          <span class="name">验证码<i>*</i></span>
          <div class="input_box">
            <input type="text" class="a_input" v-model="addForm.msgCode" maxlength="6" />
            <van-button type="primary" class="van_btn" size="mini" @click="sendCode" :disabled="time > 0">{{ time > 0 ? time + "重新获取验证码" : "获取验证码" }}</van-button>
          </div>
        </div>
        <!-- <div class="cell">
          <span class="name">年龄<i>*</i></span>
          <div class="input_box">
            <input type="text" class="a_input" v-model="addForm.age" maxlength="2" />
          </div>
        </div> -->
        <!-- <div class="cell">
          <span class="name">性别<i>*</i></span>
          <div class="input_box" @click="openDialog('showPopup')">
            <input type="text" class="a_input" v-model="addForm.sex" placeholder="请选择" readonly />
            <van-icon name="arrow-down" class="van_icon" />
          </div>
        </div> -->
        <div class="cell">
          <span class="name">逾期金额<i>*</i></span>
          <div class="input_box" @click="openDialog('showAmountPopup')">
            <input type="text" class="a_input" v-model="addForm.amount" placeholder="请选择" readonly />
            <van-icon name="arrow-down" class="van_icon" />
          </div>
        </div>
        <div class="cell">
          <span class="name">逾期时间<i>*</i></span>
          <div class="input_box" @click="openDialog('showTimePopup')">
            <input type="text" class="a_input" v-model="addForm.overdue" placeholder="请选择" readonly />
            <van-icon name="arrow-down" class="van_icon" />
          </div>
        </div>
        <!-- 协议 开始 -->
        <div class="xiyi_box">
          <van-checkbox v-model="checked" checked-color="#006cff" icon-size="16">自动输入历史信息<span @click.stop="lookContract">《个人信息授权与隐私政策》</span></van-checkbox>
        </div>
        <!-- 协议 end -->
        <div class="btn_group">
          <van-button type="info" class="van_btn" @click="saveInfo" round>立即咨询</van-button>
        </div>
      </div>
    </div>

    <div class="banner">
      <img src="@/assets/545.jpg" alt="">
      <img src="@/assets/546.jpg" alt="">
    </div>

    <!-- 热门问题 开始 -->
    <div class="hot_question" ref="hotQuestion">
      <div class="title">热门问题</div>
      <div class="sub_title">点击下方问题，可快速咨询</div>
      <div class="question_box">
        <vue-seamless-scroll :data="question" class="warp" :class-option="classOption">
          <div class="question_list">
            <div v-for="(item, index) in question" :key="index" class="cell">
              <van-icon name="comment-o" />
              {{item}}
            </div>
          </div>
        </vue-seamless-scroll>
      </div>

      <div class="ask_list">
        <div class="cell" v-for="(item,index) in askList" :key="index">
          <div class="txt_box">
            <p>{{item}}<img src="@/assets/hot.png" v-if="item  == 1" alt=""></p>
            <p class="p1" @click="opentService()">请咨询我们</p>
          </div>
          <div class="btn_box">
            <button class="btn" @click="opentService()">在线咨询</button>
          </div>
        </div>
      </div>

    </div>
    <!-- 热门问题 end -->

    <div class="info_box">
      <h2 class="h2">专业客服在线一对一接待</h2>
      <div class="login">
        <div class="cell">
          <span class="name">称呼<i>*</i></span>
          <div class="input_box">
            <input type="text" class="a_input" v-model="addForm.name" />
          </div>
        </div>
        <div class="cell">
          <span class="name">电话<i>*</i></span>
          <div class="input_box">
            <input type="text" class="a_input" v-model="addForm.mobile" />
          </div>
        </div>
        <div class="cell">
          <span class="name">验证码<i>*</i></span>
          <div class="input_box">
            <input type="text" class="a_input" v-model="addForm.msgCode" maxlength="6" />
            <van-button type="primary" class="van_btn" size="mini" @click="sendCode" :disabled="time > 0">{{ time > 0 ? time + "重新获取验证码" : "获取验证码" }}</van-button>
          </div>
        </div>
        <!-- <div class="cell">
          <span class="name">年龄<i>*</i></span>
          <div class="input_box">
            <input type="text" class="a_input" v-model="addForm.age" />
          </div>
        </div> -->
        <!-- <div class="cell">
          <span class="name">性别<i>*</i></span>
          <div class="input_box" @click="openDialog('showPopup')">
            <input type="text" class="a_input" v-model="addForm.sex" placeholder="请选择" readonly />
            <van-icon name="arrow-down" class="van_icon" />
          </div>
        </div> -->
        <div class="cell">
          <span class="name">逾期金额<i>*</i></span>
          <div class="input_box" @click="openDialog('showAmountPopup')">
            <input type="text" class="a_input" v-model="addForm.amount" placeholder="请选择" readonly />
            <van-icon name="arrow-down" class="van_icon" />
          </div>
        </div>
        <div class="cell">
          <span class="name">逾期时间<i>*</i></span>
          <div class="input_box" @click="openDialog('showTimePopup')">
            <input type="text" class="a_input" v-model="addForm.overdue" placeholder="请选择" readonly />
            <van-icon name="arrow-down" class="van_icon" />
          </div>
        </div>
        <!-- 协议 开始 -->
        <div class="xiyi_box">
          <van-checkbox v-model="checked" checked-color="#006cff" icon-size="16">自动输入历史信息<span @click.stop="lookContract">《个人信息授权与隐私政策》</span></van-checkbox>
        </div>
        <!-- 协议 end -->
        <div class="btn_group">
          <van-button type="info" class="van_btn" @click="saveInfo" round>立即咨询</van-button>
        </div>
      </div>
    </div>

    <!-- 最新参与客户 开始 -->
    <div class="customer_box">
      <div class="head">最新客户</div>
      <vue-seamless-scroll :data="history" class="warp" :class-option="customerOption">
        <ul class="ask_ul">
          <li v-for="(item, index) in history" :key="index" class="cell">
            <div class="dl">
              <van-icon name="volume-o" />
              <span>{{item.name}}</span>
            </div>
            <span>{{item.mobile}}</span>
            <span>{{item.time}}</span>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
    <!-- 最新参与客户 end -->

    <!-- 页脚 开始 -->
    <div class="footer">
      <p>安徽甲耀法律咨询有限公司</p>
      <p class="desc">
        <span class="sp1">有保标有保障</span>
        <span class="sp2">30天保障时效</span>
        <span class="sp3">协助维权更放心</span>
      </p>
    </div>
    <!-- 页脚 end -->

    <!-- 悬浮按钮 开始 -->
    <div class="fixed_btn">
      <button class="btn" @click="opentService()">
        <van-icon name="comment-o" /><span class="txt">立即咨询</span>
      </button>
    </div>
    <!-- 悬浮按钮 end -->

    <!-- 性别弹框 开始 -->
    <van-popup v-model="showPopup" position="bottom">
      <van-picker title="性别" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="closeDialog()" />
    </van-popup>
    <!-- 性别弹框 end -->

    <!-- 逾期时间弹框 开始 -->
    <van-popup v-model="showTimePopup" position="bottom">
      <van-picker title="逾期时间" show-toolbar :columns="timeColumns" @confirm="saveTime" @cancel="closeDialog('showTimePopup')" />
    </van-popup>
    <!-- 逾期时间弹框 end -->

    <!-- 逾期金额弹框 开始 -->
    <van-popup v-model="showAmountPopup" position="bottom">
      <van-picker title="逾期金额" show-toolbar :columns="amountColumns" @confirm="saveAmount" @cancel="closeDialog('showAmountPopup')" />
    </van-popup>
    <!-- 逾期金额弹框 end -->

    <!-- 在线客服弹框 开始 -->
    <van-popup v-model="servicePopup" position="bottom">
      <div class="popup_head">
        <span>客服在线为您服务</span>
        <van-icon name="cross" class="van_icon" @click="closeService()" />
      </div>
      <div class="popup_content">

        <!-- 单条聊天 开始 -->
        <div class="chart_message">
          <div class="avatar">
            <img src="@/assets/avatar.jpg" alt="">
          </div>
          <div class="message">
            <div class="msg">您好，有什么可以帮您解答的吗？</div>
          </div>
        </div>
        <!-- 单条聊天 end -->

        <!-- 单条聊天 开始 -->
        <div class="chart_message">
          <div class="avatar">
            <img src="@/assets/avatar.jpg" alt="">
          </div>
          <div class="message">
            <div class="msg">您好，客服目前不在线，方便留下您的联系方式吗，客服会尽快联系您，为您做详细解答</div>
          </div>
        </div>
        <!-- 单条聊天 end -->

        <div class="info_box">
          <h2 class="h2">客服尽快和您联系</h2>
          <div class="login">
            <div class="cell">
              <span class="name">称呼<i>*</i></span>
              <div class="input_box">
                <input type="text" class="a_input" v-model="addForm.name" />
              </div>
            </div>
            <div class="cell">
              <span class="name">电话<i>*</i></span>
              <div class="input_box">
                <input type="text" class="a_input" v-model="addForm.mobile" />
              </div>
            </div>
            <div class="cell">
              <span class="name">验证码<i>*</i></span>
              <div class="input_box">
                <input type="text" class="a_input" v-model="addForm.msgCode" maxlength="6" />
                <van-button type="primary" class="van_btn" size="mini" @click="sendCode" :disabled="time > 0">{{ time > 0 ? time + "重新获取验证码" : "获取验证码" }}</van-button>
              </div>
            </div>
            <!-- <div class="cell">
              <span class="name">年龄<i>*</i></span>
              <div class="input_box">
                <input type="text" class="a_input" v-model="addForm.age" />
              </div>
            </div> -->
            <!-- <div class="cell">
              <span class="name">性别<i>*</i></span>
              <div class="input_box" @click="openDialog('showPopup')">
                <input type="text" class="a_input" v-model="addForm.sex" placeholder="请选择" readonly />
                <van-icon name="arrow-down" class="van_icon" />
              </div>
            </div> -->
            <div class="cell">
              <span class="name">逾期金额<i>*</i></span>
              <div class="input_box" @click="openDialog('showAmountPopup')">
                <input type="text" class="a_input" v-model="addForm.amount" placeholder="请选择" readonly />
                <van-icon name="arrow-down" class="van_icon" />
              </div>
            </div>
            <div class="cell">
              <span class="name">逾期时间<i>*</i></span>
              <div class="input_box" @click="openDialog('showTimePopup')">
                <input type="text" class="a_input" v-model="addForm.overdue" placeholder="请选择" readonly />
                <van-icon name="arrow-down" class="van_icon" />
              </div>
            </div>
            <!-- 协议 开始 -->
            <div class="xiyi_box">
              <van-checkbox v-model="checked" checked-color="#006cff" icon-size="16">自动输入历史信息<span @click.stop="lookContract">《个人信息授权与隐私政策》</span></van-checkbox>
            </div>
            <!-- 协议 end -->
            <div class="btn_group">
              <van-button type="info" class="van_btn" @click="saveInfo" round>立即提交</van-button>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 在线客服弹框 end -->

  </div>
</template>
<script>
import { showToast, showModal, checkPhone, getUrlParams } from "@/common/util";
import {
  CREDITAPPLY,
  MARKETINGADD,
  SENDMARKETINGREPORTING,
  GETCREDITPARAM,
  GETCODE,
} from "@/http/interface";
import { Toast, Icon, Picker, Popup, Button, Checkbox } from "vant";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    [Icon.name]: Icon,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [Checkbox.name]: Checkbox,
    vueSeamlessScroll,
  },
  data() {
    return {
      addForm: {},
      menus: [
        { name: "在校生", id: 1 },
        { name: "财会在职人员", id: 2 },
      ],
      active: 1,
      adId: "",
      columns: ["男", "女"],
      showPopup: false,
      timeColumns: [
        { text: "即将逾期", id: 5 },
        { text: "1-3月", id: "1" },
        { text: "4-6月", id: "2" },
        { text: "7-12月", id: "3" },
        { text: "12月以上", id: "4" },
      ],
      showTimePopup: false,
      amountColumns: ["3万以内", "3-5万", "5-8万", "8万以上"],
      showAmountPopup: false,
      time: 0,
      question: [],
      history: [],
      classOption: {
        step: 0.3,
        direction: 2,
      },
      askList: [
        "信用卡还不上怎么申请停息挂账？怎么操作？",
        "信用卡逾期催收上门了怎么办？",
        "怎么延长还款周期？可以分60期吗？",
        "信用卡逾期了怎么和银行协商解决？",
      ],
      customerOption: {
        step: 0.3,
        direction: 1,
      },
      path: "https://baozhang.baidu.com/guarantee/m/?fid=nHDsPjcYrjnzPWfYPHfdn1mLrHKxnWcdg1n&ch=4&bfid=fbuFw0cKNB3a00Uc5Gb00rD00sA7lzcaW-Yxh0s000jPrDbcH60000f0gf02YngHseSCYI5AvBEFeVEpcPj7YtrOJQSCYSQAvBLfkI5jElWH3_Upd5gjVQ84QIXCYogPkUUHcMGzD0&bd_vid=nHDsPjcYrjnzPWfYPHfdn1mLrHKxnWcdg1PxnH0s&fr=fcpage#/",
      showLogin: false,
      servicePopup: false,
      checked: true,
    };
  },
  mounted() {
    this.send();
    this.getRecord();
  },
  methods: {
    //
    menuEvent(row) {
      this.active = row.id;
    },

    // 保存数据
    saveInfo() {
      let _this = this;
      let o = this.addForm;
      if (!o.name) {
        showModal({
          message: "请输入称呼",
        });
        return false;
      }

      if (!o.mobile) {
        showModal({
          message: "请输入电话",
        });
        return false;
      }

      if (!checkPhone(o.mobile)) {
        showModal({
          message: "请输入正确的电话",
        });
        return false;
      }

      if (!o.msgCode) {
        showModal({
          message: "请输入短信验证码",
        });
        return false;
      }

      // if (!o.age) {
      //   showModal({
      //     message: "请输入年龄",
      //   });
      //   return false;
      // }

      // if (!o.sex) {
      //   showModal({
      //     message: "请选择性别",
      //   });
      //   return false;
      // }

      if (!o.amount) {
        showModal({
          message: "请输入逾期金额",
        });
        return false;
      }

      if (!o.overdue) {
        showModal({
          message: "请选择逾期时间",
        });
        return false;
      }

      if (!this.checked) {
        showModal({
          message: "请同意并阅读个人信息授权与隐私政策",
        });
        return false;
      }

      let m = getUrlParams();
      let oParams = JSON.parse(JSON.stringify(this.addForm)) || {};
      //oParams.occupation = this.active;
      //oParams.area = "广东";
      oParams.sex = oParams.sex == "男" ? 1 : 2;
      oParams.channel = m.channel;

      CREDITAPPLY(oParams).then((res) => {
        if (res.code != 0) {
          showModal({
            message: res.msg || res.message,
          });
          return false;
        }

        _this.toReport();
        _this.addForm = {};
        showModal({
          message: "提交成功\n客服会第一时间联系您，请注意接听电话",
          type: "success",
        });
      });
    },

    /** 进入首页 埋点 */
    send() {
      let _this = this;
      let o = getUrlParams();
      let oParams = {};
      let base64 = this.toBase64();
      oParams.accountId = o.accountId;
      oParams.channel = o.channel;
      oParams.urlBase64 = base64;
      oParams.clickId = o.gdt_vid;
      console.log(oParams);
      MARKETINGADD(oParams).then((res) => {
        if (res.code != 0) {
          Toast(res.message || res.msg || "出错了，请联系管理员");
          return false;
        }
        _this.adId = res.o;
      });
    },

    /** 获取base64 */
    toBase64() {
      let url = window.location.href;
      let n = encodeURI(url);
      var base64 = btoa(n);
      return base64;
    },

    /** 广告上报 */
    toReport() {
      let _this = this;
      let o = getUrlParams();
      let oParams = {};
      let base64 = this.toBase64();
      // oParams.accountId = o.accountId;
      // oParams.channel = o.channel;
      // oParams.urlBase64 = base64;
      // oParams.clickId = o.gdt_vid;
      // console.log(oParams);
      oParams.mId = this.adId;
      SENDMARKETINGREPORTING(oParams);
    },

    // 打开弹框
    openDialog(id) {
      this[id || "showPopup"] = true;
    },

    // 关闭弹框
    closeDialog(id) {
      this[id || "showPopup"] = false;
    },

    // 保存性别
    onConfirm(e) {
      console.log(e);
      this.addForm.sex = e;
      this.closeDialog();
    },
    // 保存逾期时间
    saveTime(e) {
      this.addForm.overdue = e.text;
      this.closeDialog("showTimePopup");
    },

    /** 获取短信验证码 */
    sendCode() {
      let that = this;
      let time = 60;
      let o = this.addForm.mobile;
      if (!o) {
        Toast("请输入手机号码");
        return false;
      }

      if (!checkPhone(o)) {
        Toast("手机号码格式不正确");
        return false;
      }

      let m = setInterval(function () {
        if (time == 0) {
          clearInterval(m);
          that.time = "";
          return false;
        }
        time--;
        that.time = time--;
      }, 1000);

      GETCODE({ mobile: o }).then((res) => {
        console.log(res);
        if (res.code != 0) {
          Toast(res.message || res.msg || "出错了，请联系管理员");
          return false;
        }
        //that.form.code = res.data;
      });
    },

    // 获取记录
    getRecord() {
      GETCREDITPARAM().then((res) => {
        let obj = res.data || {};
        this.question = obj.question || [];
        this.history = obj.history || [];
      });
    },

    // 咨询
    opentService() {
      this.servicePopup = true;
    },

    // 关闭咨询
    closeService() {
      this.servicePopup = false;
    },

    // 查看个人授权与隐私
    lookContract() {
      let host = window.location.origin;
      let url = `${host}/隐私政策.html`;
      window.location.href = url;
    },

    // 保存逾期金额
    saveAmount(e) {
      console.log(e);
      this.addForm.amount = e;
      this.closeDialog("showAmountPopup");
    },
  },
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>